<template>
	<view class="searchBox">
		<view class="search" style="margin-top: 70rpx;">
			<u-search placeholder="搜索已关注的人" v-model="keywords" :showAction="false" @search="onSearch"></u-search>
		</view>

		<view class="box">
			<view class="title dis-flex flex-y-center">我的关注（{{ num }}）</view>
			<view class="list dis-flex flex-x-between flex-y-center" v-for="item in list" :key="item.id">
				<image v-if="item.interests.avatar" :src="url + item.interests.avatar" class="avatar"
					style="border-radius:50%;height: 80rpx;" />
				<image v-else src="/static/imgs/tou.png" class="avatar" mode="widthFix" />
				<view class="flex-box dis-flex flex-x-between flex-y-center lines">
					<view class="name flex-box">{{ item.interests.username }}</view>
					<view v-if="item.other == 1" class="talk" @click="cancelInterestOne(item.interests.id,item)">互相关注</view>
					<view v-else class="talk" @click="cancelInterestOne(item.interests.id,item)">取消关注</view>
					<u-icon name="more-dot-fill" color="#252525" size="22" @click="toSelect(item.interests.id)"></u-icon>
				</view>
				
			</view>
		</view>
		<view class="address-window" :class="selected==true?'on':''">
			
			<view class="wrap">
				<view class="toTalk"@click="gotoChat()" >发私信</view>
				<!-- <view class="del" @click="remove()">移除粉丝</view> -->
			</view>
		</view>
		<view class='mask' style="z-index: 999;" catchtouchmove="true" :hidden='selected==false' @click='close'></view>
	</view>
</template>

<script>
	import {
		storeMsg, sendMessage
	} from "../../api/chat.js";
	import {cancelInterest
	} from '../../api/hall.js'
import { myInterest, interestOne } from "../../api/my.js"
import env from '@/utlis/env.js';
export default {
	name: 'notice', // 关注
	data() {
		return {
			keywords: '',
			selected: false,
			list: [],
			url: env.baseUrl,
			num: 0,
		}
	},
	// 监听,当输入框清空时触发方法this.firend()
	watch: {
		keywords: {
			handler(newVal, oldVal) {
				this.Interest()
			}
		}
	},
	created() {
		this.url = env.baseUrl
		this.Interest()

	},
	methods: {
		gotoChat() {
			this.goChat(this.user_id)
		},
		//直接聊天
		async goChat(user_id) {
			console.log(user_id, 'sssssssssssssssss');
			//创建会话
			await storeMsg({
				'receiver_id': user_id
			}).then(res => {
				if (res.code == 1) {
					let data = res.data
					//跳转到聊天页面
					uni.navigateTo({
						url: '/pages/im/chat?data=' + JSON.stringify(data)
					})
				} else {
					uni.showToast({
						'title': res.msg,
						'icon': 'none',
						'duration': 1000
		
					})
				}
		
			});
		},
		close() {
			this.selected = false
		},
		toSelect(id) {
			this.selected = true
			this.user_id = id
		},
		//取消关注某人
		async cancelInterestOne(user_id,item) {
			const res = await cancelInterest({
				'user_id': user_id
			}).then(res => {
				if(res.code == 1){
					this.list = this.list.filter(listItem => listItem !== item);
					this.num -=1
					uni.showToast({
						'duration':1500,
						'icon':'none',
						'title':res.msg
					})
				}
				uni.showToast({
					'duration':1500,
					'icon':'none',
					'title':res.msg
				})
			});
		},
		//获取个人信息
		async Interest() {
			const res = await myInterest().then(res => {
				console.log(res, '获取我的关注');
				this.list = res.data.data
				this.num = res.data.num
			});

		},
		// 搜索

		async onSearch() {
			const res = await myInterest({
				search: this.keywords
			}).then(res => {
				console.log(res, '-------------');
				this.list = res.data.data
				this.num = res.data.num
			})
		},
	}
}
</script>
<style lang="scss" scoped>
.searchBox {
	width: 100%;

	.search {
		padding: 20rpx 30rpx;
	}

	.box {
		padding: 22rpx 30rpx 0;

		.title {
			font-size: 28rpx;
			color: $uni-text-color-primary;

			.avatars {
				width: 36rpx;
				margin-right: 12rpx;
				border-radius: 50%;
			}
		}

		.list {
			margin: 30rpx 0;

			.avatar {
				width: 80rpx;
				margin: 0 16rpx 0 0;
			}

			.name {
				font-weight: bold;
				font-size: 32rpx;
				color: $uni-text-color;
			}

			.talk {
				width: 125rpx;
				height: 53rpx;
				line-height: 53rpx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 26rpx;
				border: 1px solid $uni-text-color-placeholder;
				font-size: 24rpx;
				margin-right: 26rpx;
				color: $uni-text-color-placeholder;
			}
		}
	}
}
	.address-window {
		background: #F6F6F6;
		box-shadow: 0px 0px 30rpx 0px rgba(202, 202, 202, 0.6);
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
		transform: translate3d(0, 100%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
		border-radius: 30rpx 30rpx 0 0;
		padding: 40rpx 30rpx 100rpx;

		&.on {
			transform: translate3d(0, 0, 0);
		}

		.wrap {
			padding: 0 30rpx;
			background: #fff;

			.toTalk {
				padding: 35rpx 0;
				border-bottom: 1px solid #eee;
				font-size: 30rpx;
				color: $uni-text-color;
			}

			.del {
				font-size: 30rpx;
				color: #FE3849;
				padding: 35rpx 0;
			}
		}
	}
</style>